<template>
<div class="body_top">
    <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
    >
        <div class="bowll" v-show="ballFlag"></div>
    </transition>

    <div class="mui-card">
        <div class="mui-card-content">
            <div class="mui-card-content-inner" >
                <mt-swipe :auto="1000" style="width:220px;height:220px">
                    <mt-swipe-item ><img style="width:100%;height:100%"
                            src="https://img12.360buyimg.com/n7/jfs/t1/32472/22/3371/192059/5c74b147Ee2eaefb4/8a9eaa0ea1365ed0.jpg"
                            alt=""></mt-swipe-item>
                    <mt-swipe-item><img style="width:100%;height:100%"
                            src="https://img13.360buyimg.com/n7/jfs/t1/15957/19/8176/189352/5c74b16fE441603e8/a1bda439038caa12.jpg"
                            alt=""></mt-swipe-item>
                    <mt-swipe-item><img style="width:100%;height:100%"
                            src="https://img14.360buyimg.com/n7/jfs/t1/25195/38/8303/214452/5c74b0fdE6988f08a/28427e48e5445f77.jpg"
                            alt=""></mt-swipe-item>
                </mt-swipe>
            </div>
        </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-header">商品标题小米</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <div class="pcrie">
                    市场价： <del>¥2399</del>&nbsp;&nbsp;销售价： <span class="noe_price">¥2199</span>
                    <div class="buton"> <p>购买数量:</p>
                        <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
                            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                            <input id="test" class="mui-input-numbox" type="number" value="5" />
                            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                        </div>
                    </div>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="addToShop">加入购物车</mt-button>
                </div>
            </div>
        </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-header">商品参数</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
            <p>商品货号：</p>
            <p>商品货号：</p>
            <p>商品货号：</p>
            </div>
        </div>
        <div class="mui-card-footer">
            <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
            <mt-button type="danger" size="large" plain @click="goComent(id)">商品评论</mt-button>
        </div>
    </div>
</div>
</template>

<script>
    export default {
        name: "Goodsinfo",
        data(){
            return{
                id:this.$route.params.id,
                ballFlag:false
            }
        },
        methods:{
            goDesc(id){
                this.$router.push({name:"goodsdesc",params:{id}})
            },
            goComent(id){
                this.$router.push({name:"goodscomment",params:{id}})
            },
            addToShop(){
                this.ballFlag=!this.ballFlag
            },
            beforeEnter(el){
                el.style.transform="translate(0,0)"
            },
            enter(el,done){
                el.offsetWidth
                el.style.transform= "translate(96px,230px)"
                el.style.transition="all 1s cubic-bezier(0.4,-0.3,1,0.68)"
                done()
            },
            afterEnter(el){
                this.ballFlag=!this.ballFlag
            }
        }
    }
</script>

<style scoped lang="scss">
    .mint-swipe{
        height: 200px;
        .mint-swipe-item{
            // &:nth-child(1){
            //     background: red;
            // }
            // &:nth-child(2){
            //     background: yellow;
            // }
            // &:nth-child(3){
            //     background: green;
            // }

        }
    }
    .body_top{
        background-color: #eee;
        overflow: hidden;
    }
    .noe_price{
        color: red;
        font-size: 16px;
        font-weight: bold;
    }
    .mui-card-footer{
        button{
            margin: 15px 0;
        }
        display: block;
    }
    .buton{
        display: flex;
        margin: 10px 0;
        display: -webkit-flex;
        align-items:center;

    }
    .bowll{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        z-index: 1000;
        top: 390px;
        left: 140px;
    }
</style>
